<template>
  <div class="product-parts-selector">
    <div slot="header">
      <span>产品与备件选择</span>
    </div>

    <!-- 产品选择 -->
    <el-form label-width="120px" >
      <el-form-item label="选择产品">
        <el-select v-model="selectedProduct" placeholder="请选择产品" filterable @change="handleProductChange">
          <el-option v-for="(productList, productTypeCode) in productMap" :key="productTypeCode" :label="productTypeCode" :value="productTypeCode">
            <span style="float: left">{{ productTypeCode }}</span>
            <!-- <span style="float: right; color: #8492a6; font-size: 13px">{{ product.code }}</span> -->
          </el-option>
        </el-select>
      </el-form-item>

      <!-- 备件选择 -->
      <el-form-item label="选择备件" v-if="selectedProduct">
        <el-select v-model="selectedSpareParts" multiple placeholder="请选择备件" @change="handlePartChange" style="width: 100%">
          <el-option v-for="part in currentSpareParts" :key="part.relId" :label="part.partModel" :value="part.relId">
            <span>{{ part.partModel }}</span>
            <el-tag size="small" style="margin-left: 10px">{{ part.partNameCh }}</el-tag>
          </el-option>
        </el-select>
      </el-form-item>

      <!-- 零件搜索 -->
      <!-- <el-form-item label="搜索零件">
        <el-input v-model="partSearchQuery" placeholder="输入零件名称或编码" style="width: 300px"
          @keyup.enter.native="searchParts">
          <el-button slot="append" icon="el-icon-search" @click="searchParts"></el-button>
        </el-input>
      </el-form-item> -->

      <!-- 零件选择 -->
      <!-- <el-form-item label="选择零件" v-if="searchResults.length > 0">
        <el-table :data="searchResults" border style="width: 100%" @selection-change="handlePartSelectionChange">
          <el-table-column type="selection" width="55">
          </el-table-column>
          <el-table-column prop="code" label="零件编码" width="120">
          </el-table-column>
          <el-table-column prop="name" label="零件名称">
          </el-table-column>
          <el-table-column prop="spec" label="规格型号">
          </el-table-column>
        </el-table>
      </el-form-item> -->

      <!-- 未找到备件时手动添加 -->
      <!-- <el-form-item label="手动添加备件">
        <el-button type="primary" @click="showAddPartDialog = true">
          <i class="el-icon-plus"></i> 添加新备件
        </el-button>
        <span style="color: #999; margin-left: 10px">未找到所需备件？可以手动添加</span>
      </el-form-item> -->
    </el-form>

    <!-- 已选项目展示 -->
    <el-divider></el-divider>
    <h4>已选项目</h4>
    <el-table :data="selectedItems" style="width: 100%" border>
      <el-table-column prop="productTypeCode" label="产品型号" width="100">
      </el-table-column>
      <el-table-column prop="partModel" label="备件型号">
      </el-table-column>
      <el-table-column prop="partNameCh" label="备件名称">
      </el-table-column>
      <el-table-column prop="partNumber" label="备件序列号">
      </el-table-column>
    </el-table>

    <!-- 添加新零件对话框 -->
    <!-- <el-dialog title="添加新备件" :visible.sync="showAddPartDialog" width="50%">
      <el-form :model="newPart" label-width="120px">
        <el-form-item label="备件名称" required>
          <el-input v-model="newPart.partNameCh" placeholder="请输入备件"></el-input>
        </el-form-item>
        <el-form-item label="产品型号" required>
          <el-input v-model="newPart.productTypeCode" placeholder="请输入产品型号"></el-input>
        </el-form-item>
        <el-form-item label="规格型号">
          <el-input v-model="newPart.spec" placeholder="请输入规格型号"></el-input>
        </el-form-item>
        <el-form-item label="描述">
          <el-input type="textarea" v-model="newPart.description"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showAddPartDialog = false">取 消</el-button>
        <el-button type="primary" @click="addNewPart">确 定</el-button>
      </span>
    </el-dialog> -->
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted,onBeforeUnmount } from "vue"
import { updateShipId, listRel, uploadFile, batchCreateProduct } from "~/api/productApi"

//父子传参
const props = defineProps({
    selectedParts: Array
})
const productMap = ref([])
const selectedProduct = ref(null)
const selectedSpareParts= ref([])
const currentSpareParts= ref([]) 
const selectedItems = ref([])

//添加新备件弹窗
// const showAddPartDialog = ref(false)

// 已选产品
function handleProductChange(productTypeCode) {
  selectedProduct.value = productTypeCode
  currentSpareParts.value = productMap.value[productTypeCode]
  selectedSpareParts.value = []
}

//已选备件
function handlePartChange(values) {
  console.log('values:', JSON.stringify(values))
  selectedItems.value = currentSpareParts.value.filter(part => values.includes(part.relId))
  getCheckedPart()
}


// 对外暴露方法
const emit = defineEmits([
    'getCheckedPart',
])

const getCheckedPart = () => {
    const selectData = selectedItems
    let returnParams = selectData.value
    console.log("已选项目:", JSON.stringify(returnParams))
    emit("getCheckedPart", returnParams)
}


// 生命周期函数
onMounted(async () => {
  console.log('props===>', JSON.stringify(props.selectedParts))
    // 获取产品列表
    let paramIo = {}
    await listRel(paramIo).then(res => {
      if (res) {
        productMap.value = res
      }
    })
      //已经选择的进行赋值
    if(null != props.selectedParts && props.selectedParts.length>0){
        selectedItems.value = props.selectedParts
        selectedProduct.value = props.selectedParts[0].productTypeCode
        currentSpareParts.value = productMap.value[selectedProduct.value]
        selectedSpareParts.value = props.selectedParts.map(item => item.relId)
    }
})

</script>


<style scoped>
.product-parts-selector {
  padding: 20px;
}

.box-card {
  margin: 20px;
}

.el-divider {
  margin: 20px 0;
}
</style>